<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8"/>
		<title>表单</title>
		<meta name="renderer" content="webkit"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="format-detection" content="telephone=no"/>

		<link rel="stylesheet" href="/layui/plugins/layui/css/layui.css" media="all" />
		<script src="/main/js/jquery.min.js"></script>
        <script src="/main/js/template-web.js"></script>
        <script src="/layui/plugins/layui/layui.js"></script>
    </head>

	<body>

    <input type="hidden" id="user2" th:value="${session.user}"/>
		<div style="margin: 15px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>编辑专题</legend>
			</fieldset>

			<form class="layui-form" action="" style="height: 100%" >
				<div class="layui-form-item">
					<div >
						<label class="layui-form-label"><b>专题名称</b></label>
					</div>
                    <input type="text" name="sTitle" th:value="${column.title}"  class="layui-input"  />
				</div>
                <div class="layui-form-item">
                    <div class="layui-upload-list">
                        <label class="layui-form-label">专题图片:</label>
                        <img onmouseover="al()" id="test1" name="img" height="100px" width="100px" th:src="${column.image}"/>
                        <input name="imgMes" id="imgMes" th:value="${column.image}" type="hidden"/>
                        <p id="demo1"></p>
                    </div>
                </div>



                <p> &nbsp;</p>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="demo1"  >立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script>

            function al() {
                layer.msg("点击头像可上传自定义头像")
            }

			layui.use(['form', 'layedit', 'laydate','upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;
                var upload = layui.upload;



                //执行实例
                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    ,url: '/uploadImg'
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#test1').attr('src', result); //图片链接（base64）
                        });
                    }
                    ,done: function(res){
                        //如果上传失败
                        if(res.flag == 0){
                            return layer.msg('上传失败');
                        }else {
                            // 成功替换到 img 的value

//                            var imgSrc = document.getElementById('test1');
//                            imgSrc.src=res.imagesPath;

                            var imgMes = document.getElementById('imgMes');
                            imgMes.value=res.imagesPath;
						}
                        //上传成功
                    }
                    ,error: function(){
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function(){
                            uploadInst.upload();
                        });
                    }
                });



				//监听提交
				form.on('submit(demo1)', function(data) {
//					layer.alert(JSON.stringify(data.field), {
//						title: '最终的提交信息'
//					});
					var Final =JSON.stringify(data.field);
					$.ajax({
                        type : "post",
                        data:data.field,
                        dataType:"json",
                        url :'/column/updateInlet/'+parent.id,
                        timeout : 20000,
                        cache : false,
                        success:function (data) {
                            if(data == 1){
                                layer.msg("更改成功");
//                                parent.layer.closeAll('iframe');

                            }
                            else{
                                layer.alert("出错了");
                                layer.closeAll('iframe');
                            }

                        }
                    });
					return false;
				});



			});

		</script>
	</body>

</html>